import React,{ Component } from "react";

/**
 *  数据渲染问题
 *      1.数据展示
 *      2.条件渲染
 *      3.列表渲染
 */

export default class Hello extends Component {
    state = {
        money: 2000,
        xml: '<div> xml类型数据 </div>',
        flag: true,
        todos: [
            {id: 1, task: "任务一"},
            {id: 2, task: "任务二"},
        ]
    }

    changeFlag = () => {
        this.setState({
            flag: !this.state.flag
        })
    }

    renderTodos = () => {
        return this.state.todos.map(item => <li key={item.id}>{item.task}</li>)
    }
    render() {
        let {money, xml, flag, todos} = this.state
        if(!flag) return <div>加载中。。。</div>
        return (
            <div>
              1.数据展示 <hr />
              <div>{money}</div>
              <div dangerouslySetInnerHTML={{__html: xml}}></div>
              2.条件展示 <hr />
              <button onClick={this.changeFlag}>change flag</button>
              <div>{flag? "真": "假"}</div>
              <div>{flag? <h3>真</h3>: <span>假</span>}</div>
              {flag? <h3>真</h3> : <h2>假</h2>}
              短路原则 <hr />
              <div>{flag && "真" || '假'}</div>
              {flag && <h3>真</h3> || <span>假</span>}

              3.列表渲染 <hr />
              {/* 数组 map 的返回值是 一个新数组 */}
                <ul>
                    {this.renderTodos()}
                    {/* {todos.map(item => <li key={item.id}>{item.task}</li>)} */}
                </ul>
            </div>
        )
    }
}

// export default function Hello() {
  

//     return (
//         <div>
          
//         </div>
//     )
// }